<!--
 * @Author: 瞿旺兴 18774621495@163.com
 * @Date: 2022-05-19 15:01:19
 * @LastEditors: 瞿旺兴 18774621495@163.com
 * @LastEditTime: 2022-06-14 17:23:43
 * @FilePath: \nien-vue3-admin\src\views\finance\receiverManame\reconciliationManagement\Receivable\collectionManage\collectionManager\components\SplitDialog.vue
 * @Description: 拆分
-->
<template>
  <el-dialog
    v-model="visible" 
    title="拆分"
  >
    <el-descriptions>
      <el-descriptions-item label="首款总金额">{{ allAmount }}</el-descriptions-item>
      <el-descriptions-item label="汇率">{{ spliceRow.exchangeRate }}</el-descriptions-item>
      <el-descriptions-item label="币种">{{ currencyLabel }}</el-descriptions-item>
    </el-descriptions>
    <el-alert title="注意：需勾选，才可对收款金额进行操作！" type="error" :closable="false"></el-alert>
    <el-table :data="tableData" @selection-change="handleTableSelect">
      <el-table-column type="selection" width="80" align="center"></el-table-column>
      <el-table-column label="账单编号" prop="serialNo"></el-table-column>
      <el-table-column label="账单金额" prop="billTotalAmount"></el-table-column>
      <el-table-column label="收款金额" prop="amount">
        <template #default="{row}">
          <el-input-number
            v-model="row.amount"
            :disabled="row.isDisabled !== false"
            :min="0"
            @input="handleInput"
          ></el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="收款金额（人民币）" prop="rmb" align="center"></el-table-column>
    </el-table>
    <template #footer>
      <div>
        <el-button type="info" @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </div>      
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, computed, defineEmits } from 'vue'
import { ElMessage } from 'element-plus'
import { selectSingleCustAllSerialNo, splitCollectionAmount } from '@/api/finance/receiverManange'
import useDicts, { DictDirection } from '@/store/modules/dicts'

const dicts = useDicts()
dicts.setDicts(DictDirection.币种)
const emits = defineEmits(['success'])

const tableData = ref([])
const allAmount = ref<number>()
const saveLoading = ref<boolean>(false)
const loading = ref<boolean>(false)
const visible = ref<boolean>(false)
const spliceRow = reactive<{[key: string]: any}>({})
const selectionsList = ref([])
const open = (row) => {
  Object.assign(spliceRow, row)
  allAmount.value = row.exchangeRateAmount
  getList()
  visible.value = true
}

const currencyLabel = computed(() => {
  return dicts.getDictLabel({ dict: DictDirection.币种, value: spliceRow.currency })
})

const getList = () => {
  loading.value = true
  selectSingleCustAllSerialNo({ customerCode: spliceRow.customerCode }).then(({ code, data }) => {
    if (code === 200) {
      tableData.value = data
    }
  }).finally(() => {
    loading.value = false
  })
}

const handleTableSelect = (rows) => {
  selectionsList.value = rows
  // <这里最终就是把 selection（多选框）和后面input disabled 产生联系>
  tableData.value.forEach(v => { v.isDisabled = true })
  rows.forEach(v => { v.isDisabled = false })
  handleInput()
}

const handleInput = () => {
  allAmount.value = spliceRow.exchangeRateAmount
  tableData.value.forEach(v => {
    if (v.isDisabled) {
      v.amount = null
      v.rmb = null
    } else {
      allAmount.value = +(allAmount.value - v.amount).toFixed(2)
      v.rmb = (v.amount * spliceRow.exchangeRate).toFixed(2)
    }
  })
}
const confirm = () => {
  saveLoading.value = true
  splitCollectionAmount({ ...spliceRow, paymentAmount: allAmount.value, serialNoAmountVos: selectionsList.value })
  .then(({ code, msg }) => {
    if (code === 200) {
      ElMessage.success(msg)
      emits('success')
      cancel()
    } else {
      ElMessage.error(msg)
    }
  }).finally(() => {
    saveLoading.value = false
  })
}

const cancel = () => {
  visible.value = false
}

defineExpose({
  open,
})
</script>